<template>
	<view class="receOrder">
		<view class="top-bg">
			<u-navbar 
			isBack 
			title="订单信息" 
			background="rgba(0,0,0,0)"
			back-icon-color="#fff"
			title-color="#fff"></u-navbar>
		</view>
		<view class="content">
			<image :src="`${baseimg}/static/common/order-color.png`" class="info-img" mode=""></image>
			<view class="info">		
				<view class="title">
					业主信息
				</view>
				<view class="name df-bt">
					<text>业主姓名</text>
					<input type="text" disabled v-model="list.realname" class="title-input" placeholder="业主真实姓名" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>				
				</view>
				<view class="phone df-bt">
					<text>手机号码</text>
					<input type="text" disabled v-model="list.phone" class="title-input" placeholder="业主手机号码" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>				
				</view>
				<view class="city df-bt">
					<text class="txt">省份</text>
					<view class="city-input df-bt">
						<input type="text" disabled v-model="list.province" disabled class="title-input" placeholder="省份" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="city df-bt">
					<text class="txt">城市</text>
					<view class="city-input df-bt">
						<input type="text" disabled v-model="list.city" disabled class="title-input" placeholder="城市" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="city df-bt">
					<text class="txt">县区</text>
					<view class="city-input df-bt">
						<input type="text" disabled v-model="list.district" disabled class="title-input" placeholder="县区" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
			</view>
			<view class="house-info">
				<view class="title">
					房子信息
				</view>
				<view class="name df-bt">
					<text>户型</text>
					<input type="text" disabled v-model="list.house_type" class="title-input" placeholder="比如：x室x厅" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>				
				</view>
				<view class="name df-bt">
					<text>面积</text>
					<input type="text" disabled v-model="list.house_area" class="title-input" placeholder="比如：xxxm" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
				</view>
				<view class="name df-bt">
					<text>类型</text>
					<input type="text" disabled v-model="list.room_type" class="title-input" placeholder="比如：xxxm" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
				</view>
			</view>
			<view class="thinkPrice">
				<text>装修预算</text>
				{{list.renovate_budget}}万元
			</view>
			
			<view class="appeal">
				<view class="title">
					设计诉求
				</view>
				<view class="textarea">
				     <textarea disabled v-model="list.remark" maxlength="1000" placeholder-style="color:#D8D8D8" placeholder="填写简介让别人快速了解您的店铺~"/>
				</view>
			</view>
			<view class="contract" v-if="list.house_thumb_url">
				<view class="title">
					户型图
				</view>
				<view class="upload" v-if="Array.isArray(list.house_thumb_url)">
					<view class="imgBox" v-for="(item,index) in list.house_thumb_url">
						<image :src="item.path" mode="" @click="toViewImg(index)"></image>
					</view>
				</view>
				<view class="upload" v-else>
					<view class="imgBox">
						<image :src="list.house_thumb_url.path" mode="" @click="toViewImg(0)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="footer" v-if="!showTime">
			<!-- <button @click="toSend">确定并发给客户</button> -->
			<button @click="handleOrder">确定接单</button>
		</view>
	</view> 
</template>

<script>
	export default{
		data(){
			return{
				baseimg:this.$static,
				order_id:null,
				list:{}
			}
		},
		onLoad(options) {
			this.order_id = options.id
			this.getDetail()
		},
		methods:{
			// 获取订单详情
			getDetail(){
				let params = {
					id:this.order_id
				}
				this.$api.designerOrder_getDetail(params).then(res=>{
					console.log(res,'详情')
					if(res.code == 1){
						res.data.house_area = res.data.house_area+' m²'
						this.list = res.data
					}
				})
			},
			
			// 图片预览
			toViewImg(index) { 
				let imgArr = this.list.archive.house_thumb_url
				let urlType = Array.isArray(imgArr)
				console.log(imgArr,'需要预览的图片')
				let imgUrl = []
				if (urlType) {
					imgArr.map(item => {
						imgUrl.push(item.path)
					})
				} else {
					imgUrl.push(imgArr.path)
				}
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				});
			},
			
			// 确定接单
			handleOrder(){
				this.$api.designerOrder_accept({id:this.order_id}).then(res=>{
					if(res.code==1){
						// this.getOrderList()
						uni.redirectTo({
							url:`/pageTwo/home/order/order?id=${this.order_id}`
						})
						uni.showToast({
							title:'接单成功',
							icon:'success'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}				 
				})	
			},
		}
	}
</script>

<style lang="scss" scoped>
	.receOrder{
		.top-bg{
			background:  url(https://manager.ryz1620.com/static/home-personal/personal-bg.png) no-repeat top;
			width: 100%;
			height: 468rpx;
			position: relative;
			/deep/ .u-navbar .u-border-bottom{
						border: 0 !important;
			}
			.title{
				display: flex;
				margin: 80rpx 0 0 44rpx;				
				.pay{
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 36rpx;
					color: #FFFFFF;
				}
			}			
		}
		.content{
			position: absolute;
			left: 0;
			top: 190rpx;
			z-index: 99;
			padding: 24rpx 24rpx 0rpx 24rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			width: 100%;
			margin-bottom: 150rpx;
			.info-img{
				width: 702rpx;
				height: 38rpx;
			}
			.info{
				padding: 24rpx;
				background-color: #fff;
				// border-radius: 16rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.name{
					width: 70%;
					margin: 40rpx 0;
				}
				.phone{
					width: 70%;
					margin-bottom: 80rpx;
				}
				.city{					
					margin-bottom: 40rpx;
					.txt{
						width: 30%;
					}
					.city-input{
						width: 90%;
						.title-input{
							// text-align: right;
							margin-right: 20rpx;
						}
					}
					.icon-jinru{
						color: #D8D8D8;
						font-size: 26rpx;
					}
					
				}
			}
			.house-info{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.name{
					width: 70%;
					margin: 40rpx 0;
				}
				.phone{
					width: 70%;
					margin-bottom: 80rpx;
				}
			}
			.thinkPrice{
				margin-top: 30rpx;
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				font: 500 30rpx/40rpx PingFang SC;
				color: #0A0605;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.appeal{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.textarea{
					background: #F8F8F8;
					padding: 24rpx;
					min-height: 200rpx;
					overflow-y: auto;
					margin-top: 40rpx;
				}
			}
			.contract{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				
				.upload{
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.imgBox{
						margin: 0 5rpx 10rpx;
						position: relative;
						width: 200rpx;
						height: 200rpx;
						border-radius: 4rpx;
						image:nth-child(1){
							width: 100%;
							height: 100%;
							border-radius: 4rpx;
						}
						image:nth-child(2){
							width: 50rpx;
							height: 50rpx;
							position: absolute;
							top: 5rpx;
							right: 5rpx;
						}
					}
					.uploadBtn{
						margin: 0 5rpx 10rpx;
						background-color: #F8F8F8;
						border-radius: 4rpx;
						width: 200rpx;
						height: 200rpx;
						font-size: 60rpx;
						display:  flex;
						align-items: center;
						color: #A0A0A0;
						flex-direction: column;
						justify-content: center;
						span{font: 400 22rpx/36rpx PingFang SC;}
					}
				}
			}
			.design-time{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.u-calendar{
					margin-top: 40rpx;
					// z-index: 99999;
					.title{
						text-align: center;
						padding: 20rpx 0 0 0;
					}
					.left{
						background: #F8F8F8;
						padding: 24rpx 36rpx;
					}
					.right{
						background: #F8F8F8;
						padding: 24rpx 36rpx;
					}
				}
			}
			.contract-amount{
					padding: 24rpx;
					background-color: #fff;
					border-radius: 16rpx;
					margin-top: 30rpx;
					.title{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #0A0605;
					}
			
					.input-pay{
							width: 100%;
							height: 84rpx;
							margin-top: 40rpx;
							background-color: #F8F8F8;
							color: #DBA954;
					}
					
			}
		}
		.footer{
			height: 150rpx;
			width: 100%;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9999;
			padding: 0 30rpx;
			height: calc(120rpx+ constant(safe-area-inset-bottom)); 			height: calc(120rpx + env(safe-area-inset-bottom));			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			button{
				width: 606rpx;
				margin:20rpx auto;
				font: 500 32rpx/80rpx PingFang SC;
				height: 80rpx;
				color: #fff;
				background: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
				box-shadow: 0px 6rpx 12rpx rgba(219, 169, 84, 0.3);
				border-radius: 46rpx;
			}
		}
	}
</style>
